<template>
    <div class="page">
        <div class="content" ref="echarts"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myEcharts: null
        }

    },
    methods: {
        // 屏幕适配
        screen() {
            this.myEcharts.resize()
            let width = this.$refs.echarts.offsetWidth
            let num = width / 100 * 5
            let legendStyle = width / 100 * 6

            let options = {
                title: {
                    textStyle: {
                        fontSize: num
                    }
                },
                legend: {
                    top: legendStyle,
                    left: legendStyle
                }
            }
            this.myEcharts.setOption(options)
        },
        initEcharts() {
            let main = this.$refs.echarts;
            this.myEcharts = this.$echarts.init(main,this.themeStatus);
            let options = {
                title: {
                    text: "种植农作物面积统计",
                    textStyle: {
                        fontSize: 30,
                        left: 20,
                        top: 20,
                    }
                },
                tooltip: {
                    show: true
                },
               
                legend: {
                    show: true,
                    left: '30',
                    top: 30
                }                

            }
            this.myEcharts.setOption(options)
        },
        async getData() {
            let data = await this.$axios('/TotalAreaCropsProportion');
            console.log(data);
            let dataList = [];

            let seriesData = data.data.map(item => {
                dataList.push({
                    value: item.value,
                    name: item.name
                })
                // console.log(dataList);
                return {
                    type: "pie",
                    data: dataList,
                    radius:'50%'
                }
            })
            // console.log(dataList);

            this.setOption(seriesData)
        },
        setOption(seriesData) {
            let options = {
                series: seriesData
            }
            this.myEcharts.setOption(options)
            this.screen()
        }
    },
    mounted() {
        this.initEcharts();
        this.getData();
        window.addEventListener('resize', this.screen)

    },
    watch: {
        // 监听切换主题
        themeStatus() {
            // 销毁之前的实例
            this.myEcharts.dispose();
            this.initEcharts();
            this.getData()
            // this.screen();
        }
    },
    computed: {
        themeStatus() {
            return this.$store.state.theme
        }
    },
    filters: {},
    components: {},
}
</script>
<style scoped></style>